<script setup>
import { useStyleTag } from '@vueuse/core'
import {
 ArrowRight,
 View
} from '@element-plus/icons-vue'
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router' // 导入 useRouter 钩子函数
import { useUserStore } from '@/stores';
import { getAlumniRandomDataService } from '@/api/alumniEvent'; // 引入接口函数
import { testServiceApi } from '@/api/user';
useStyleTag(
 `@import 
  url("//at.alicdn.com/t/c/font_4833919_u5exoq1fwy.css");`,
 { id: 'iconfont-css' })// 唯一 ID 防止重复

// 定义一个响应式变量来跟踪当前激活的选项卡索引
const activeTab = ref(0)

//处理顶部滚动
// 定义一个响应式变量来跟踪是否固定 header
const main = ref(null);
const show_slide_header = ref(false);
const handleScroll = () => {
 const n = document.documentElement.scrollTop;
 show_slide_header.value = n >= main.value.offsetTop ? true : false;
};
// 调用 useUserStore 函数获取 store 实例
const userStore = useUserStore();

// const logout = () => {
//   // 清除用户信息
//   userStore.$reset(); 
//   // 跳转到登录页，假设登录页路由为 '/login'
//   router.push('/login'); 
// };
// 获取 user 变量
const user = userStore.user;


const alumniEventList = ref([])
const getAlumniData = async () => {
//  const res = await getAlumniRandomDataService(7);
//  console.log(alumniEventList.value);
}


onMounted(() => {
 getAlumniData();
 window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
 window.removeEventListener('scroll', handleScroll);
});



const testService=async ()=>{
 const res = await testServiceApi('none');
 console.log(res);
}


</script>

<template>

 <div class="large_header">
  <div class="slide_down">
   <ul class="left_entry">
    <li class="logo">
     <h1>
      <!-- 使用 Vue Router 的 RouterLink 替换 a 标签 -->
      <router-link to="/" target="_blank" rel="noopener noreferrer">毕业生之家GradLink</router-link>
     </h1>
    </li>
    <li class="employ_analysis">
     <!-- 使用 Vue Router 的 RouterLink 替换 a 标签 -->
     <router-link to="/employment-analysis" target="_blank" rel="noopener noreferrer">
      <span>就业数据分析</span>
     </router-link>
    </li>
   </ul>
   <div class="center_search_container">
    <div class="center-search__bar">
     <form action="">
      <div class="nav-search-content">
       <input class="nav-search-input" type="text" autocomplete="off" accesskey="s" maxlength="100" x-webkit-speech=""
        x-webkit-grammar="builtin:translate" value="" placeholder="复旦大学生公开炫耀学历 结果被撒贝宁无情打脸"
        title="复旦大学生公开炫耀学历 结果被撒贝宁无情打脸">
       <div class="nav-search-clean">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" clip-rule="evenodd"
          d="M8 14.75C11.7279 14.75 14.75 11.7279 14.75 8C14.75 4.27208 11.7279 1.25 8 1.25C4.27208 1.25 1.25 4.27208 1.25 8C1.25 11.7279 4.27208 14.75 8 14.75ZM9.64999 5.64303C9.84525 5.44777 10.1618 5.44777 10.3571 5.64303C10.5524 5.83829 10.5524 6.15487 10.3571 6.35014L8.70718 8.00005L10.3571 9.64997C10.5524 9.84523 10.5524 10.1618 10.3571 10.3571C10.1618 10.5523 9.84525 10.5523 9.64999 10.3571L8.00007 8.70716L6.35016 10.3571C6.15489 10.5523 5.83831 10.5523 5.64305 10.3571C5.44779 10.1618 5.44779 9.84523 5.64305 9.64997L7.29296 8.00005L5.64305 6.35014C5.44779 6.15487 5.44779 5.83829 5.64305 5.64303C5.83831 5.44777 6.15489 5.44777 6.35016 5.64303L8.00007 7.29294L9.64999 5.64303Z"
          fill="#C9CCD0">
         </path>
        </svg>
       </div>
      </div>
      <div class="nav-search-btn">
       <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd"
         d="M16.3451 15.2003C16.6377 15.4915 16.4752 15.772 16.1934 16.0632C16.15 16.1279 16.0958 16.1818 16.0525 16.2249C15.7707 16.473 15.4456 16.624 15.1854 16.3652L11.6848 12.8815C10.4709 13.8198 8.97529 14.3267 7.44714 14.3267C3.62134 14.3267 0.5 11.2314 0.5 7.41337C0.5 3.60616 3.6105 0.5 7.44714 0.5C11.2729 0.5 14.3943 3.59538 14.3943 7.41337C14.3943 8.98802 13.8524 10.5087 12.8661 11.7383L16.3451 15.2003ZM2.13647 7.4026C2.13647 10.3146 4.52083 12.6766 7.43624 12.6766C10.3517 12.6766 12.736 10.3146 12.736 7.4026C12.736 4.49058 10.3517 2.1286 7.43624 2.1286C4.50999 2.1286 2.13647 4.50136 2.13647 7.4026Z"
         fill="currentColor"></path>
       </svg>
      </div>
     </form>
    </div>
   </div>
   <ul class="right_entry">
    <!-- 头像 -->
    <li class="header-avatar-wrap">
     <div class="header-avatar-wrap--container">
      <router-link class="header-entry-mini" to="/user-center" target="_blank" rel="noopener noreferrer">
       <img :src="user.avatarUrl" alt="">
      </router-link>
      <!-- <router-link class="header-entry-avatar"  to="/user-center" target="_blank" rel="noopener noreferrer">
              <img :src="user.avatarUrl" alt="">
            </router-link> -->
     </div>
     <div class="v-popover avatar-popover-is-bottom">
      <div class="v-popover-content">
       <div class="avatar-panel-popover" style="display: none;">

        <!-- 顶部留出空间给半个大头像占位 -->
        <div class="avatar-top-space"></div>
        <!-- 显示昵称 -->
        <div class="user-nickname">{{ user.nickName }}</div>
        <!-- 导航列表 -->
        <ul class="links-item">
         <router-link class="single-link-item" to="/user-center" target="_blank" rel="noopener noreferrer">
          <div class="link-title">
           <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
            class="link-icon">
            <rect opacity="0.01" width="18" height="18" fill="white"></rect>
            <path
             d="M12.1146 9.48983C13.2763 8.63331 14.0299 7.2548 14.0299 5.7035C14.0299 3.11005 11.9198 1 9.32636 1C6.73291 1 4.62286 3.11005 4.62286 5.7035C4.62286 7.2548 5.37829 8.63331 6.53808 9.48983C3.87662 10.589 2 13.2118 2 16.2648C2 16.671 2.32901 17 2.73521 17C3.14141 17 3.47042 16.671 3.47042 16.2648C3.47042 13.0335 6.09879 10.407 9.3282 10.407C12.5576 10.407 15.186 13.0354 15.186 16.2648C15.186 16.671 15.515 17 15.9212 17C16.3274 17 16.6564 16.671 16.6564 16.2648C16.6546 13.2118 14.7761 10.589 12.1146 9.48983ZM6.09144 5.7035C6.09144 3.91878 7.54348 2.46858 9.32636 2.46858C11.1092 2.46858 12.5613 3.92062 12.5613 5.7035C12.5613 7.48639 11.1092 8.93843 9.32636 8.93843C7.54348 8.93843 6.09144 7.48639 6.09144 5.7035Z"
             fill="#61666d"></path>
           </svg>
           <span>个人中心</span>
          </div>
          <svg width="10" height="10" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"
           class="link-icon--right">
           <path fill-rule="evenodd" clip-rule="evenodd"
            d="M7.50588 3.40623C7.40825 3.3086 7.24996 3.3086 7.15232 3.40623L4.41244 6.14612L1.67255 3.40623C1.57491 3.3086 1.41662 3.3086 1.31899 3.40623C1.22136 3.50386 1.22136 3.66215 1.31899 3.75978L4.11781 6.5586C4.28053 6.72132 4.54434 6.72132 4.70706 6.5586L7.50588 3.75978C7.60351 3.66215 7.60351 3.50386 7.50588 3.40623Z"
            fill="currentColor"></path>
           <path
            d="M7.15232 3.40623L7.50588 3.75978L7.50588 3.75978L7.15232 3.40623ZM7.50588 3.40623L7.15232 3.75978L7.15233 3.75978L7.50588 3.40623ZM4.41244 6.14612L4.05888 6.49967C4.15265 6.59344 4.27983 6.64612 4.41244 6.64612C4.54504 6.64612 4.67222 6.59344 4.76599 6.49967L4.41244 6.14612ZM1.67255 3.40623L2.0261 3.05268L2.0261 3.05268L1.67255 3.40623ZM1.31899 3.40623L0.965439 3.05268L0.965439 3.05268L1.31899 3.40623ZM1.31899 3.75978L1.67255 3.40623V3.40623L1.31899 3.75978ZM4.11781 6.5586L3.76425 6.91215L4.11781 6.5586ZM4.70706 6.5586L4.35351 6.20505L4.70706 6.5586ZM7.50588 3.75978L7.15233 3.40623L7.15232 3.40623L7.50588 3.75978ZM7.50588 3.75978C7.40825 3.85742 7.24996 3.85742 7.15232 3.75978L7.85943 3.05268C7.56654 2.75978 7.09166 2.75978 6.79877 3.05268L7.50588 3.75978ZM4.76599 6.49967L7.50588 3.75978L6.79877 3.05268L4.05888 5.79257L4.76599 6.49967ZM1.31899 3.75978L4.05888 6.49967L4.76599 5.79257L2.0261 3.05268L1.31899 3.75978ZM1.67254 3.75979C1.57491 3.85742 1.41662 3.85742 1.31899 3.75979L2.0261 3.05268C1.73321 2.75978 1.25833 2.75978 0.965439 3.05268L1.67254 3.75979ZM1.67255 3.40623C1.77018 3.50386 1.77018 3.66215 1.67255 3.75978L0.965439 3.05268C0.672546 3.34557 0.672546 3.82044 0.965439 4.11334L1.67255 3.40623ZM4.47136 6.20505L1.67255 3.40623L0.965439 4.11334L3.76425 6.91215L4.47136 6.20505ZM4.35351 6.20505C4.38605 6.1725 4.43882 6.1725 4.47136 6.20505L3.76425 6.91215C4.12223 7.27013 4.70264 7.27013 5.06062 6.91215L4.35351 6.20505ZM7.15232 3.40623L4.35351 6.20505L5.06062 6.91215L7.85943 4.11334L7.15232 3.40623ZM7.15233 3.75978C7.05469 3.66215 7.05469 3.50386 7.15233 3.40623L7.85943 4.11334C8.15233 3.82045 8.15233 3.34557 7.85943 3.05268L7.15233 3.75978Z"
            fill="currentColor"></path>
          </svg>
         </router-link>
         <router-link class="single-link-item" to="/activity-manage" target="_blank" rel="noopener noreferrer">
          <div class="link-title">

           <i class="iconfont icon-huodong_huodongguanli link-icon"></i>
           <span>活动管理</span>
          </div>
          <svg width="10" height="10" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"
           class="link-icon--right">
           <path fill-rule="evenodd" clip-rule="evenodd"
            d="M7.50588 3.40623C7.40825 3.3086 7.24996 3.3086 7.15232 3.40623L4.41244 6.14612L1.67255 3.40623C1.57491 3.3086 1.41662 3.3086 1.31899 3.40623C1.22136 3.50386 1.22136 3.66215 1.31899 3.75978L4.11781 6.5586C4.28053 6.72132 4.54434 6.72132 4.70706 6.5586L7.50588 3.75978C7.60351 3.66215 7.60351 3.50386 7.50588 3.40623Z"
            fill="currentColor"></path>
           <path
            d="M7.15232 3.40623L7.50588 3.75978L7.50588 3.75978L7.15232 3.40623ZM7.50588 3.40623L7.15232 3.75978L7.15233 3.75978L7.50588 3.40623ZM4.41244 6.14612L4.05888 6.49967C4.15265 6.59344 4.27983 6.64612 4.41244 6.64612C4.54504 6.64612 4.67222 6.59344 4.76599 6.49967L4.41244 6.14612ZM1.67255 3.40623L2.0261 3.05268L2.0261 3.05268L1.67255 3.40623ZM1.31899 3.40623L0.965439 3.05268L0.965439 3.05268L1.31899 3.40623ZM1.31899 3.75978L1.67255 3.40623V3.40623L1.31899 3.75978ZM4.11781 6.5586L3.76425 6.91215L4.11781 6.5586ZM4.70706 6.5586L4.35351 6.20505L4.70706 6.5586ZM7.50588 3.75978L7.15233 3.40623L7.15232 3.40623L7.50588 3.75978ZM7.50588 3.75978C7.40825 3.85742 7.24996 3.85742 7.15232 3.75978L7.85943 3.05268C7.56654 2.75978 7.09166 2.75978 6.79877 3.05268L7.50588 3.75978ZM4.76599 6.49967L7.50588 3.75978L6.79877 3.05268L4.05888 5.79257L4.76599 6.49967ZM1.31899 3.75978L4.05888 6.49967L4.76599 5.79257L2.0261 3.05268L1.31899 3.75978ZM1.67254 3.75979C1.57491 3.85742 1.41662 3.85742 1.31899 3.75979L2.0261 3.05268C1.73321 2.75978 1.25833 2.75978 0.965439 3.05268L1.67254 3.75979ZM1.67255 3.40623C1.77018 3.50386 1.77018 3.66215 1.67255 3.75978L0.965439 3.05268C0.672546 3.34557 0.672546 3.82044 0.965439 4.11334L1.67255 3.40623ZM4.47136 6.20505L1.67255 3.40623L0.965439 4.11334L3.76425 6.91215L4.47136 6.20505ZM4.35351 6.20505C4.38605 6.1725 4.43882 6.1725 4.47136 6.20505L3.76425 6.91215C4.12223 7.27013 4.70264 7.27013 5.06062 6.91215L4.35351 6.20505ZM7.15232 3.40623L4.35351 6.20505L5.06062 6.91215L7.85943 4.11334L7.15232 3.40623ZM7.15233 3.75978C7.05469 3.66215 7.05469 3.50386 7.15233 3.40623L7.85943 4.11334C8.15233 3.82045 8.15233 3.34557 7.85943 3.05268L7.15233 3.75978Z"
            fill="currentColor"></path>
          </svg>
         </router-link>
         <router-link class="single-link-item" to="/activity-manage/my-registrations" target="_blank"
          rel="noopener noreferrer">
          <div class="link-title">

           <i class="iconfont icon-wodebaoming1 link-icon"></i>
           <span>我的报名</span>
          </div>
          <svg width="10" height="10" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"
           class="link-icon--right">
           <path fill-rule="evenodd" clip-rule="evenodd"
            d="M7.50588 3.40623C7.40825 3.3086 7.24996 3.3086 7.15232 3.40623L4.41244 6.14612L1.67255 3.40623C1.57491 3.3086 1.41662 3.3086 1.31899 3.40623C1.22136 3.50386 1.22136 3.66215 1.31899 3.75978L4.11781 6.5586C4.28053 6.72132 4.54434 6.72132 4.70706 6.5586L7.50588 3.75978C7.60351 3.66215 7.60351 3.50386 7.50588 3.40623Z"
            fill="currentColor"></path>
           <path
            d="M7.15232 3.40623L7.50588 3.75978L7.50588 3.75978L7.15232 3.40623ZM7.50588 3.40623L7.15232 3.75978L7.15233 3.75978L7.50588 3.40623ZM4.41244 6.14612L4.05888 6.49967C4.15265 6.59344 4.27983 6.64612 4.41244 6.64612C4.54504 6.64612 4.67222 6.59344 4.76599 6.49967L4.41244 6.14612ZM1.67255 3.40623L2.0261 3.05268L2.0261 3.05268L1.67255 3.40623ZM1.31899 3.40623L0.965439 3.05268L0.965439 3.05268L1.31899 3.40623ZM1.31899 3.75978L1.67255 3.40623V3.40623L1.31899 3.75978ZM4.11781 6.5586L3.76425 6.91215L4.11781 6.5586ZM4.70706 6.5586L4.35351 6.20505L4.70706 6.5586ZM7.50588 3.75978L7.15233 3.40623L7.15232 3.40623L7.50588 3.75978ZM7.50588 3.75978C7.40825 3.85742 7.24996 3.85742 7.15232 3.75978L7.85943 3.05268C7.56654 2.75978 7.09166 2.75978 6.79877 3.05268L7.50588 3.75978ZM4.76599 6.49967L7.50588 3.75978L6.79877 3.05268L4.05888 5.79257L4.76599 6.49967ZM1.31899 3.75978L4.05888 6.49967L4.76599 5.79257L2.0261 3.05268L1.31899 3.75978ZM1.67254 3.75979C1.57491 3.85742 1.41662 3.85742 1.31899 3.75979L2.0261 3.05268C1.73321 2.75978 1.25833 2.75978 0.965439 3.05268L1.67254 3.75979ZM1.67255 3.40623C1.77018 3.50386 1.77018 3.66215 1.67255 3.75978L0.965439 3.05268C0.672546 3.34557 0.672546 3.82044 0.965439 4.11334L1.67255 3.40623ZM4.47136 6.20505L1.67255 3.40623L0.965439 4.11334L3.76425 6.91215L4.47136 6.20505ZM4.35351 6.20505C4.38605 6.1725 4.43882 6.1725 4.47136 6.20505L3.76425 6.91215C4.12223 7.27013 4.70264 7.27013 5.06062 6.91215L4.35351 6.20505ZM7.15232 3.40623L4.35351 6.20505L5.06062 6.91215L7.85943 4.11334L7.15232 3.40623ZM7.15233 3.75978C7.05469 3.66215 7.05469 3.50386 7.15233 3.40623L7.85943 4.11334C8.15233 3.82045 8.15233 3.34557 7.85943 3.05268L7.15233 3.75978Z"
            fill="currentColor"></path>
          </svg>
         </router-link>
         <div class="split-line"></div>
         <div class="logout-item" @click.prevent="logout">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
           class="link-icon">
           <path fill-rule="evenodd" clip-rule="evenodd"
            d="M17.6137 9.30115C17.6932 9.10837 17.6932 8.89282 17.6137 8.70004C17.5743 8.60393 17.5165 8.51726 17.4443 8.44504L15.2221 6.22282C14.9148 5.9156 14.4176 5.91615 14.111 6.22282C13.8043 6.52948 13.8037 7.02671 14.111 7.33393L14.9921 8.21504L7.99985 8.21504C7.56596 8.21448 7.21429 8.56615 7.21429 9.00059C7.21429 9.21726 7.30207 9.41393 7.44429 9.55615C7.58651 9.69837 7.78318 9.78615 7.99985 9.78615L14.9921 9.78615L14.111 10.6673C13.8043 10.9739 13.8037 11.4712 14.111 11.7784C14.4182 12.0856 14.9154 12.085 15.2221 11.7784L17.4443 9.55615C17.5165 9.48393 17.5743 9.39726 17.6137 9.30115"
            fill="#61666d">
           </path>
           <path fill-rule="evenodd" clip-rule="evenodd"
            d="M11.8889 5.11111C9.74127 2.96349 6.25873 2.96349 4.11111 5.11111C1.96349 7.25873 1.96349 10.7413 4.11111 12.8889C6.25873 15.0365 9.74127 15.0365 11.8889 12.8889C12.1957 12.5821 12.6932 12.5821 13 12.8889C13.3068 13.1957 13.3068 13.6932 13 14C10.2387 16.7613 5.76127 16.7613 3 14C0.238731 11.2387 0.23873 6.76127 3 4C5.76127 1.23873 10.2387 1.23873 13 4C13.3068 4.30683 13.3068 4.80429 13 5.11111C12.6932 5.41794 12.1957 5.41794 11.8889 5.11111Z"
            fill="#61666d">
           </path>
          </svg>
          <span>退出登录</span>
         </div>
        </ul>
       </div>

      </div>
     </div>

    </li>
    <!-- 消息 -->
    <li class="v-popover-wrap right-entry--message right-entry__outside">
     <div class="red-num--message">2</div>
     <router-link to="/message-center/replies" target="_blank" class="right-entry__outside">
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
       class="right-entry-icon">
       <path
        d="M15.435 17.7717H4.567C2.60143 17.7717 1 16.1723 1 14.2047V5.76702C1 3.80144 2.59942 2.20001 4.567 2.20001H15.433C17.3986 2.20001 19 3.79943 19 5.76702V14.2047C19.002 16.1703 17.4006 17.7717 15.435 17.7717ZM4.567 4.00062C3.59327 4.00062 2.8006 4.79328 2.8006 5.76702V14.2047C2.8006 15.1784 3.59327 15.9711 4.567 15.9711H15.433C16.4067 15.9711 17.1994 15.1784 17.1994 14.2047V5.76702C17.1994 4.79328 16.4067 4.00062 15.433 4.00062H4.567Z"
        fill="currentColor"></path>
       <path
        d="M9.99943 11.2C9.51188 11.2 9.02238 11.0667 8.59748 10.8019L8.5407 10.7635L4.3329 7.65675C3.95304 7.37731 3.88842 6.86226 4.18996 6.50976C4.48954 6.15544 5.0417 6.09699 5.4196 6.37643L9.59412 9.45943C9.84279 9.60189 10.1561 9.60189 10.4067 9.45943L14.5812 6.37643C14.9591 6.09699 15.5113 6.15544 15.8109 6.50976C16.1104 6.86409 16.0478 7.37731 15.6679 7.65675L11.4014 10.8019C10.9765 11.0667 10.487 11.2 9.99943 11.2Z"
        fill="currentColor"></path>
      </svg>
      <span class="right-entry-text">消息</span>
     </router-link>
     <div class="v-popover message-popover-is-bottom">
      <div class="v-popover-content">
       <div class="message-entry-popover" style="display: none;">
        <div class="message-inner-list">
         <a class="message-inner-list__item" href="/message-center/replies" target="_blank">回复我的
          <span class="message-inner-list__item--num">2</span>
         </a>
         <a class="message-inner-list__item" href="/message-center/likes" target="_blank">收到的赞
          <span class="message-inner-list__item--num">2</span>
         </a>
        </div>
       </div>
      </div>
     </div>

    </li>
    <!-- 动态 -->
    <li class="v-popover-wrap right-entry__outside">
     <div class="red-num--message">2</div>
     <router-link to="/moments" target="_blank" class="right-entry__outside">
      <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"
       class="right-entry-icon">
       <g clip-path="url(#clip0)">
        <path
         d="M10 10.743C7.69883 10.743 5.83333 8.87747 5.83333 6.5763C5.83333 4.27512 7.69883 2.40964 10 2.40964V10.743Z"
         stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path>
        <path
         d="M10 10.743C10 13.0441 8.1345 14.9096 5.83333 14.9096C3.53217 14.9096 1.66667 13.0441 1.66667 10.743H10Z"
         stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path>
        <path
         d="M10 10.743C10 8.44182 11.8655 6.57632 14.1667 6.57632C16.4679 6.57632 18.3333 8.44182 18.3333 10.743H10Z"
         stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path>
        <path
         d="M9.99999 10.743C12.3012 10.743 14.1667 12.6085 14.1667 14.9096C14.1667 17.2108 12.3012 19.0763 9.99999 19.0763V10.743Z"
         stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path>
       </g>
       <defs>
        <clipPath id="clip0">
         <rect width="20" height="20" fill="currentColor" transform="matrix(-1 0 0 1 20 0.742981)"></rect>
        </clipPath>
       </defs>
      </svg>
      <span class="right-entry-text">动态</span>
     </router-link>
     <div class="v-popover moment-popover-is-bottom">
      <div class="v-popover-content">
       <div class="dynamic-panel-popover" style="display: none;">
        <!-- <div class="message-inner-list">
                  <a class="message-inner-list__item" href="/message-center/replies" target="_blank">回复我的
                    <span class="message-inner-list__item--num">2</span>
                  </a>
                  <a class="message-inner-list__item" href="/message-center/likes" target="_blank">收到的赞
                    <span class="message-inner-list__item--num">2</span>
                  </a>
                </div> -->
       </div>
      </div>
     </div>
    </li>
    <!-- 发布中心 -->
    <li class="right-entry-item">
     <router-link to="/activity-manage/content" target="_blank" class="right-entry__outside">
      <i class="iconfont icon-fabuzhongxin_gongzuotai right-entry-icon"></i>
      <span class="right-entry-text">发布中心</span>

     </router-link>
    </li>
    <!-- 发布活动 -->
    <li class="right-entry-item right-entry-item--upload">
     <div class="v-popover-wrap">
      <router-link to="/publish-activity" target="_blank">
       <div class="header-upload-entry">
        <!-- <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
                class="header-upload-entry__icon">
                <path
                  d="M12.0824 10H14.1412C15.0508 10 15.7882 10.7374 15.7882 11.6471V12.8824C15.7882 13.792 15.0508 14.5294 14.1412 14.5294H3.84707C2.93743 14.5294 2.20001 13.792 2.20001 12.8824V11.6471C2.20001 10.7374 2.93743 10 3.84707 10H5.90589"
                  stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8.99413 11.2353L8.99413 3.82353" stroke="currentColor" stroke-width="1.7"
                  stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12.0823 6.29413L8.9941 3.20589L5.90587 6.29413" stroke="currentColor" stroke-width="1.7"
                  stroke-linecap="round" stroke-linejoin="round">
                </path>
              </svg> -->
        <i class="iconfont icon-yumaobi header-upload-entry__icon "></i>
        <span class="header-upload-entry__text">发布活动</span>
       </div>
      </router-link>
     </div>
    </li>


   </ul>
  </div>
 </div>

 <div class="fixed_header" v-show="show_slide_header">
  <div class="slide_down">
   <ul class="left_entry">
    <li class="logo">
     <h1>
      <!-- 使用 Vue Router 的 RouterLink 替换 a 标签 -->
      <router-link to="/" target="_blank" rel="noopener noreferrer">毕业生之家GradLink</router-link>
     </h1>
    </li>
    <li class="employ_analysis">
     <!-- 使用 Vue Router 的 RouterLink 替换 a 标签 -->
     <router-link to="/employment-analysis" target="_blank" rel="noopener noreferrer">
      <span>就业数据分析</span>
     </router-link>
    </li>
   </ul>
   <div class="center_search_container">
    <div class="center-search__bar">
     <form action="">
      <div class="nav-search-content">
       <input class="nav-search-input" type="text" autocomplete="off" accesskey="s" maxlength="100" x-webkit-speech=""
        x-webkit-grammar="builtin:translate" value="" placeholder="复旦大学生公开炫耀学历 结果被撒贝宁无情打脸"
        title="复旦大学生公开炫耀学历 结果被撒贝宁无情打脸">
       <div class="nav-search-clean">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" clip-rule="evenodd"
          d="M8 14.75C11.7279 14.75 14.75 11.7279 14.75 8C14.75 4.27208 11.7279 1.25 8 1.25C4.27208 1.25 1.25 4.27208 1.25 8C1.25 11.7279 4.27208 14.75 8 14.75ZM9.64999 5.64303C9.84525 5.44777 10.1618 5.44777 10.3571 5.64303C10.5524 5.83829 10.5524 6.15487 10.3571 6.35014L8.70718 8.00005L10.3571 9.64997C10.5524 9.84523 10.5524 10.1618 10.3571 10.3571C10.1618 10.5523 9.84525 10.5523 9.64999 10.3571L8.00007 8.70716L6.35016 10.3571C6.15489 10.5523 5.83831 10.5523 5.64305 10.3571C5.44779 10.1618 5.44779 9.84523 5.64305 9.64997L7.29296 8.00005L5.64305 6.35014C5.44779 6.15487 5.44779 5.83829 5.64305 5.64303C5.83831 5.44777 6.15489 5.44777 6.35016 5.64303L8.00007 7.29294L9.64999 5.64303Z"
          fill="#C9CCD0">
         </path>
        </svg>
       </div>
      </div>
      <div class="nav-search-btn">
       <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd"
         d="M16.3451 15.2003C16.6377 15.4915 16.4752 15.772 16.1934 16.0632C16.15 16.1279 16.0958 16.1818 16.0525 16.2249C15.7707 16.473 15.4456 16.624 15.1854 16.3652L11.6848 12.8815C10.4709 13.8198 8.97529 14.3267 7.44714 14.3267C3.62134 14.3267 0.5 11.2314 0.5 7.41337C0.5 3.60616 3.6105 0.5 7.44714 0.5C11.2729 0.5 14.3943 3.59538 14.3943 7.41337C14.3943 8.98802 13.8524 10.5087 12.8661 11.7383L16.3451 15.2003ZM2.13647 7.4026C2.13647 10.3146 4.52083 12.6766 7.43624 12.6766C10.3517 12.6766 12.736 10.3146 12.736 7.4026C12.736 4.49058 10.3517 2.1286 7.43624 2.1286C4.50999 2.1286 2.13647 4.50136 2.13647 7.4026Z"
         fill="currentColor"></path>
       </svg>
      </div>
     </form>
    </div>
   </div>
   <ul class="right_entry">
    <!-- 头像 -->
    <li class="header-avatar-wrap">
     <div class="header-avatar-wrap--container">
      <router-link class="header-entry-mini" to="/user-center" target="_blank" rel="noopener noreferrer">
       <img :src="user.avatarUrl" alt="">
      </router-link>
      <!-- <router-link class="header-entry-avatar"  to="/user-center" target="_blank" rel="noopener noreferrer">
              <img :src="user.avatarUrl" alt="">
            </router-link> -->
     </div>
     <div class="v-popover avatar-popover-is-bottom">
      <div class="v-popover-content">
       <div class="avatar-panel-popover" style="display: none;">

        <!-- 顶部留出空间给半个大头像占位 -->
        <div class="avatar-top-space"></div>
        <!-- 显示昵称 -->
        <div class="user-nickname">{{ user.nickName }}</div>
        <!-- 导航列表 -->
        <ul class="links-item">
         <router-link class="single-link-item" to="/user-center" target="_blank" rel="noopener noreferrer">
          <div class="link-title">
           <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
            class="link-icon">
            <rect opacity="0.01" width="18" height="18" fill="white"></rect>
            <path
             d="M12.1146 9.48983C13.2763 8.63331 14.0299 7.2548 14.0299 5.7035C14.0299 3.11005 11.9198 1 9.32636 1C6.73291 1 4.62286 3.11005 4.62286 5.7035C4.62286 7.2548 5.37829 8.63331 6.53808 9.48983C3.87662 10.589 2 13.2118 2 16.2648C2 16.671 2.32901 17 2.73521 17C3.14141 17 3.47042 16.671 3.47042 16.2648C3.47042 13.0335 6.09879 10.407 9.3282 10.407C12.5576 10.407 15.186 13.0354 15.186 16.2648C15.186 16.671 15.515 17 15.9212 17C16.3274 17 16.6564 16.671 16.6564 16.2648C16.6546 13.2118 14.7761 10.589 12.1146 9.48983ZM6.09144 5.7035C6.09144 3.91878 7.54348 2.46858 9.32636 2.46858C11.1092 2.46858 12.5613 3.92062 12.5613 5.7035C12.5613 7.48639 11.1092 8.93843 9.32636 8.93843C7.54348 8.93843 6.09144 7.48639 6.09144 5.7035Z"
             fill="#61666d"></path>
           </svg>
           <span>个人中心</span>
          </div>
          <svg width="10" height="10" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"
           class="link-icon--right">
           <path fill-rule="evenodd" clip-rule="evenodd"
            d="M7.50588 3.40623C7.40825 3.3086 7.24996 3.3086 7.15232 3.40623L4.41244 6.14612L1.67255 3.40623C1.57491 3.3086 1.41662 3.3086 1.31899 3.40623C1.22136 3.50386 1.22136 3.66215 1.31899 3.75978L4.11781 6.5586C4.28053 6.72132 4.54434 6.72132 4.70706 6.5586L7.50588 3.75978C7.60351 3.66215 7.60351 3.50386 7.50588 3.40623Z"
            fill="currentColor"></path>
           <path
            d="M7.15232 3.40623L7.50588 3.75978L7.50588 3.75978L7.15232 3.40623ZM7.50588 3.40623L7.15232 3.75978L7.15233 3.75978L7.50588 3.40623ZM4.41244 6.14612L4.05888 6.49967C4.15265 6.59344 4.27983 6.64612 4.41244 6.64612C4.54504 6.64612 4.67222 6.59344 4.76599 6.49967L4.41244 6.14612ZM1.67255 3.40623L2.0261 3.05268L2.0261 3.05268L1.67255 3.40623ZM1.31899 3.40623L0.965439 3.05268L0.965439 3.05268L1.31899 3.40623ZM1.31899 3.75978L1.67255 3.40623V3.40623L1.31899 3.75978ZM4.11781 6.5586L3.76425 6.91215L4.11781 6.5586ZM4.70706 6.5586L4.35351 6.20505L4.70706 6.5586ZM7.50588 3.75978L7.15233 3.40623L7.15232 3.40623L7.50588 3.75978ZM7.50588 3.75978C7.40825 3.85742 7.24996 3.85742 7.15232 3.75978L7.85943 3.05268C7.56654 2.75978 7.09166 2.75978 6.79877 3.05268L7.50588 3.75978ZM4.76599 6.49967L7.50588 3.75978L6.79877 3.05268L4.05888 5.79257L4.76599 6.49967ZM1.31899 3.75978L4.05888 6.49967L4.76599 5.79257L2.0261 3.05268L1.31899 3.75978ZM1.67254 3.75979C1.57491 3.85742 1.41662 3.85742 1.31899 3.75979L2.0261 3.05268C1.73321 2.75978 1.25833 2.75978 0.965439 3.05268L1.67254 3.75979ZM1.67255 3.40623C1.77018 3.50386 1.77018 3.66215 1.67255 3.75978L0.965439 3.05268C0.672546 3.34557 0.672546 3.82044 0.965439 4.11334L1.67255 3.40623ZM4.47136 6.20505L1.67255 3.40623L0.965439 4.11334L3.76425 6.91215L4.47136 6.20505ZM4.35351 6.20505C4.38605 6.1725 4.43882 6.1725 4.47136 6.20505L3.76425 6.91215C4.12223 7.27013 4.70264 7.27013 5.06062 6.91215L4.35351 6.20505ZM7.15232 3.40623L4.35351 6.20505L5.06062 6.91215L7.85943 4.11334L7.15232 3.40623ZM7.15233 3.75978C7.05469 3.66215 7.05469 3.50386 7.15233 3.40623L7.85943 4.11334C8.15233 3.82045 8.15233 3.34557 7.85943 3.05268L7.15233 3.75978Z"
            fill="currentColor"></path>
          </svg>
         </router-link>
         <router-link class="single-link-item" to="/activity-manage" target="_blank" rel="noopener noreferrer">
          <div class="link-title">

           <i class="iconfont icon-huodong_huodongguanli link-icon"></i>
           <span>活动管理</span>
          </div>
          <svg width="10" height="10" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"
           class="link-icon--right">
           <path fill-rule="evenodd" clip-rule="evenodd"
            d="M7.50588 3.40623C7.40825 3.3086 7.24996 3.3086 7.15232 3.40623L4.41244 6.14612L1.67255 3.40623C1.57491 3.3086 1.41662 3.3086 1.31899 3.40623C1.22136 3.50386 1.22136 3.66215 1.31899 3.75978L4.11781 6.5586C4.28053 6.72132 4.54434 6.72132 4.70706 6.5586L7.50588 3.75978C7.60351 3.66215 7.60351 3.50386 7.50588 3.40623Z"
            fill="currentColor"></path>
           <path
            d="M7.15232 3.40623L7.50588 3.75978L7.50588 3.75978L7.15232 3.40623ZM7.50588 3.40623L7.15232 3.75978L7.15233 3.75978L7.50588 3.40623ZM4.41244 6.14612L4.05888 6.49967C4.15265 6.59344 4.27983 6.64612 4.41244 6.64612C4.54504 6.64612 4.67222 6.59344 4.76599 6.49967L4.41244 6.14612ZM1.67255 3.40623L2.0261 3.05268L2.0261 3.05268L1.67255 3.40623ZM1.31899 3.40623L0.965439 3.05268L0.965439 3.05268L1.31899 3.40623ZM1.31899 3.75978L1.67255 3.40623V3.40623L1.31899 3.75978ZM4.11781 6.5586L3.76425 6.91215L4.11781 6.5586ZM4.70706 6.5586L4.35351 6.20505L4.70706 6.5586ZM7.50588 3.75978L7.15233 3.40623L7.15232 3.40623L7.50588 3.75978ZM7.50588 3.75978C7.40825 3.85742 7.24996 3.85742 7.15232 3.75978L7.85943 3.05268C7.56654 2.75978 7.09166 2.75978 6.79877 3.05268L7.50588 3.75978ZM4.76599 6.49967L7.50588 3.75978L6.79877 3.05268L4.05888 5.79257L4.76599 6.49967ZM1.31899 3.75978L4.05888 6.49967L4.76599 5.79257L2.0261 3.05268L1.31899 3.75978ZM1.67254 3.75979C1.57491 3.85742 1.41662 3.85742 1.31899 3.75979L2.0261 3.05268C1.73321 2.75978 1.25833 2.75978 0.965439 3.05268L1.67254 3.75979ZM1.67255 3.40623C1.77018 3.50386 1.77018 3.66215 1.67255 3.75978L0.965439 3.05268C0.672546 3.34557 0.672546 3.82044 0.965439 4.11334L1.67255 3.40623ZM4.47136 6.20505L1.67255 3.40623L0.965439 4.11334L3.76425 6.91215L4.47136 6.20505ZM4.35351 6.20505C4.38605 6.1725 4.43882 6.1725 4.47136 6.20505L3.76425 6.91215C4.12223 7.27013 4.70264 7.27013 5.06062 6.91215L4.35351 6.20505ZM7.15232 3.40623L4.35351 6.20505L5.06062 6.91215L7.85943 4.11334L7.15232 3.40623ZM7.15233 3.75978C7.05469 3.66215 7.05469 3.50386 7.15233 3.40623L7.85943 4.11334C8.15233 3.82045 8.15233 3.34557 7.85943 3.05268L7.15233 3.75978Z"
            fill="currentColor"></path>
          </svg>
         </router-link>
         <router-link class="single-link-item" to="/activity-manage/my-registrations" target="_blank"
          rel="noopener noreferrer">
          <div class="link-title">

           <i class="iconfont icon-wodebaoming1 link-icon"></i>
           <span>我的报名</span>
          </div>
          <svg width="10" height="10" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"
           class="link-icon--right">
           <path fill-rule="evenodd" clip-rule="evenodd"
            d="M7.50588 3.40623C7.40825 3.3086 7.24996 3.3086 7.15232 3.40623L4.41244 6.14612L1.67255 3.40623C1.57491 3.3086 1.41662 3.3086 1.31899 3.40623C1.22136 3.50386 1.22136 3.66215 1.31899 3.75978L4.11781 6.5586C4.28053 6.72132 4.54434 6.72132 4.70706 6.5586L7.50588 3.75978C7.60351 3.66215 7.60351 3.50386 7.50588 3.40623Z"
            fill="currentColor"></path>
           <path
            d="M7.15232 3.40623L7.50588 3.75978L7.50588 3.75978L7.15232 3.40623ZM7.50588 3.40623L7.15232 3.75978L7.15233 3.75978L7.50588 3.40623ZM4.41244 6.14612L4.05888 6.49967C4.15265 6.59344 4.27983 6.64612 4.41244 6.64612C4.54504 6.64612 4.67222 6.59344 4.76599 6.49967L4.41244 6.14612ZM1.67255 3.40623L2.0261 3.05268L2.0261 3.05268L1.67255 3.40623ZM1.31899 3.40623L0.965439 3.05268L0.965439 3.05268L1.31899 3.40623ZM1.31899 3.75978L1.67255 3.40623V3.40623L1.31899 3.75978ZM4.11781 6.5586L3.76425 6.91215L4.11781 6.5586ZM4.70706 6.5586L4.35351 6.20505L4.70706 6.5586ZM7.50588 3.75978L7.15233 3.40623L7.15232 3.40623L7.50588 3.75978ZM7.50588 3.75978C7.40825 3.85742 7.24996 3.85742 7.15232 3.75978L7.85943 3.05268C7.56654 2.75978 7.09166 2.75978 6.79877 3.05268L7.50588 3.75978ZM4.76599 6.49967L7.50588 3.75978L6.79877 3.05268L4.05888 5.79257L4.76599 6.49967ZM1.31899 3.75978L4.05888 6.49967L4.76599 5.79257L2.0261 3.05268L1.31899 3.75978ZM1.67254 3.75979C1.57491 3.85742 1.41662 3.85742 1.31899 3.75979L2.0261 3.05268C1.73321 2.75978 1.25833 2.75978 0.965439 3.05268L1.67254 3.75979ZM1.67255 3.40623C1.77018 3.50386 1.77018 3.66215 1.67255 3.75978L0.965439 3.05268C0.672546 3.34557 0.672546 3.82044 0.965439 4.11334L1.67255 3.40623ZM4.47136 6.20505L1.67255 3.40623L0.965439 4.11334L3.76425 6.91215L4.47136 6.20505ZM4.35351 6.20505C4.38605 6.1725 4.43882 6.1725 4.47136 6.20505L3.76425 6.91215C4.12223 7.27013 4.70264 7.27013 5.06062 6.91215L4.35351 6.20505ZM7.15232 3.40623L4.35351 6.20505L5.06062 6.91215L7.85943 4.11334L7.15232 3.40623ZM7.15233 3.75978C7.05469 3.66215 7.05469 3.50386 7.15233 3.40623L7.85943 4.11334C8.15233 3.82045 8.15233 3.34557 7.85943 3.05268L7.15233 3.75978Z"
            fill="currentColor"></path>
          </svg>
         </router-link>
         <div class="split-line"></div>
         <div class="logout-item" @click.prevent="logout">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
           class="link-icon">
           <path fill-rule="evenodd" clip-rule="evenodd"
            d="M17.6137 9.30115C17.6932 9.10837 17.6932 8.89282 17.6137 8.70004C17.5743 8.60393 17.5165 8.51726 17.4443 8.44504L15.2221 6.22282C14.9148 5.9156 14.4176 5.91615 14.111 6.22282C13.8043 6.52948 13.8037 7.02671 14.111 7.33393L14.9921 8.21504L7.99985 8.21504C7.56596 8.21448 7.21429 8.56615 7.21429 9.00059C7.21429 9.21726 7.30207 9.41393 7.44429 9.55615C7.58651 9.69837 7.78318 9.78615 7.99985 9.78615L14.9921 9.78615L14.111 10.6673C13.8043 10.9739 13.8037 11.4712 14.111 11.7784C14.4182 12.0856 14.9154 12.085 15.2221 11.7784L17.4443 9.55615C17.5165 9.48393 17.5743 9.39726 17.6137 9.30115"
            fill="#61666d">
           </path>
           <path fill-rule="evenodd" clip-rule="evenodd"
            d="M11.8889 5.11111C9.74127 2.96349 6.25873 2.96349 4.11111 5.11111C1.96349 7.25873 1.96349 10.7413 4.11111 12.8889C6.25873 15.0365 9.74127 15.0365 11.8889 12.8889C12.1957 12.5821 12.6932 12.5821 13 12.8889C13.3068 13.1957 13.3068 13.6932 13 14C10.2387 16.7613 5.76127 16.7613 3 14C0.238731 11.2387 0.23873 6.76127 3 4C5.76127 1.23873 10.2387 1.23873 13 4C13.3068 4.30683 13.3068 4.80429 13 5.11111C12.6932 5.41794 12.1957 5.41794 11.8889 5.11111Z"
            fill="#61666d">
           </path>
          </svg>
          <span>退出登录</span>
         </div>
        </ul>
       </div>

      </div>
     </div>

    </li>
    <!-- 消息 -->
    <li class="v-popover-wrap right-entry--message right-entry__outside">
     <div class="red-num--message">2</div>
     <router-link to="/message-center/replies" target="_blank" class="right-entry__outside">
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
       class="right-entry-icon">
       <path
        d="M15.435 17.7717H4.567C2.60143 17.7717 1 16.1723 1 14.2047V5.76702C1 3.80144 2.59942 2.20001 4.567 2.20001H15.433C17.3986 2.20001 19 3.79943 19 5.76702V14.2047C19.002 16.1703 17.4006 17.7717 15.435 17.7717ZM4.567 4.00062C3.59327 4.00062 2.8006 4.79328 2.8006 5.76702V14.2047C2.8006 15.1784 3.59327 15.9711 4.567 15.9711H15.433C16.4067 15.9711 17.1994 15.1784 17.1994 14.2047V5.76702C17.1994 4.79328 16.4067 4.00062 15.433 4.00062H4.567Z"
        fill="currentColor"></path>
       <path
        d="M9.99943 11.2C9.51188 11.2 9.02238 11.0667 8.59748 10.8019L8.5407 10.7635L4.3329 7.65675C3.95304 7.37731 3.88842 6.86226 4.18996 6.50976C4.48954 6.15544 5.0417 6.09699 5.4196 6.37643L9.59412 9.45943C9.84279 9.60189 10.1561 9.60189 10.4067 9.45943L14.5812 6.37643C14.9591 6.09699 15.5113 6.15544 15.8109 6.50976C16.1104 6.86409 16.0478 7.37731 15.6679 7.65675L11.4014 10.8019C10.9765 11.0667 10.487 11.2 9.99943 11.2Z"
        fill="currentColor"></path>
      </svg>
      <span class="right-entry-text">消息</span>
     </router-link>
     <div class="v-popover message-popover-is-bottom">
      <div class="v-popover-content">
       <div class="message-entry-popover" style="display: none;">
        <div class="message-inner-list">
         <a class="message-inner-list__item" href="/message-center/replies" target="_blank">回复我的
          <span class="message-inner-list__item--num">2</span>
         </a>
         <a class="message-inner-list__item" href="/message-center/likes" target="_blank">收到的赞
          <span class="message-inner-list__item--num">2</span>
         </a>
        </div>
       </div>
      </div>
     </div>

    </li>
    <!-- 动态 -->
    <li class="v-popover-wrap right-entry__outside">
     <div class="red-num--message">2</div>
     <router-link to="/moments" target="_blank" class="right-entry__outside">
      <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"
       class="right-entry-icon">
       <g clip-path="url(#clip0)">
        <path
         d="M10 10.743C7.69883 10.743 5.83333 8.87747 5.83333 6.5763C5.83333 4.27512 7.69883 2.40964 10 2.40964V10.743Z"
         stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path>
        <path
         d="M10 10.743C10 13.0441 8.1345 14.9096 5.83333 14.9096C3.53217 14.9096 1.66667 13.0441 1.66667 10.743H10Z"
         stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path>
        <path
         d="M10 10.743C10 8.44182 11.8655 6.57632 14.1667 6.57632C16.4679 6.57632 18.3333 8.44182 18.3333 10.743H10Z"
         stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path>
        <path
         d="M9.99999 10.743C12.3012 10.743 14.1667 12.6085 14.1667 14.9096C14.1667 17.2108 12.3012 19.0763 9.99999 19.0763V10.743Z"
         stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path>
       </g>
       <defs>
        <clipPath id="clip0">
         <rect width="20" height="20" fill="currentColor" transform="matrix(-1 0 0 1 20 0.742981)"></rect>
        </clipPath>
       </defs>
      </svg>
      <span class="right-entry-text">动态</span>
     </router-link>
     <div class="v-popover moment-popover-is-bottom">
      <div class="v-popover-content">
       <div class="dynamic-panel-popover" style="display: none;">
        <!-- <div class="message-inner-list">
                  <a class="message-inner-list__item" href="/message-center/replies" target="_blank">回复我的
                    <span class="message-inner-list__item--num">2</span>
                  </a>
                  <a class="message-inner-list__item" href="/message-center/likes" target="_blank">收到的赞
                    <span class="message-inner-list__item--num">2</span>
                  </a>
                </div> -->
       </div>
      </div>
     </div>
    </li>
    <!-- 发布中心 -->
    <li class="right-entry-item">
     <router-link to="/activity-manage/content" target="_blank" class="right-entry__outside">
      <i class="iconfont icon-fabuzhongxin_gongzuotai right-entry-icon"></i>
      <span class="right-entry-text">发布中心</span>

     </router-link>
    </li>
    <!-- 发布活动 -->
    <li class="right-entry-item right-entry-item--upload">
     <div class="v-popover-wrap">
      <router-link to="/publish-activity" target="_blank">
       <div class="header-upload-entry">
        <!-- <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
                class="header-upload-entry__icon">
                <path
                  d="M12.0824 10H14.1412C15.0508 10 15.7882 10.7374 15.7882 11.6471V12.8824C15.7882 13.792 15.0508 14.5294 14.1412 14.5294H3.84707C2.93743 14.5294 2.20001 13.792 2.20001 12.8824V11.6471C2.20001 10.7374 2.93743 10 3.84707 10H5.90589"
                  stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8.99413 11.2353L8.99413 3.82353" stroke="currentColor" stroke-width="1.7"
                  stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12.0823 6.29413L8.9941 3.20589L5.90587 6.29413" stroke="currentColor" stroke-width="1.7"
                  stroke-linecap="round" stroke-linejoin="round">
                </path>
              </svg> -->
        <i class="iconfont icon-yumaobi header-upload-entry__icon "></i>
        <span class="header-upload-entry__text">发布活动</span>
       </div>
      </router-link>
     </div>
    </li>


   </ul>
  </div>
 </div>

 <!-- 新增内容容器 -->
 <div class="main-container" ref="main">

  <el-button  type="primary" @click="testService">测试异常</el-button>
  <div class="content-wrapper">
   <div class="content-main">
    <div class="alumni-event">
     <div class="home-cont-title ">
      <span>校友活动</span>
      <p>
       <!-- 跳转到/alumni-event -->
       更多资讯
       <el-icon class="right-icon">
        <ArrowRight />
       </el-icon>
      </p>
     </div>
     <div class="home-info-banner">
      <a href="/" target="_blank" class="banner-box">
       <img src="../assets/hiddenImg.jpg" alt="">
       <div class="banner-img"></div>
       <p>
        <span class="word-2">180分钟复刻40k Star神话背后：OpenManus
         00后主创现场演示，Agent开发的“快”与“痛” | 万有引力</span>
       </p>
      </a>
      <a href="#" target="_blank" class="banner-box">
       <img src="../assets/hiddenImg.jpg" alt="">
       <div class="banner-img"></div>
       <p>
        <span class="word-2">180分钟复刻40k Star神话背后：OpenManus
         00后主创现场演示，Agent开发的“快”与“痛” | 万有引力</span>
       </p>
      </a>
      <a href="#" target="_blank" class="banner-box">
       <img src="../assets/hiddenImg.jpg" alt="">
       <div class="banner-img"></div>
       <p>
        <span class="word-2">180分钟复刻40k Star神话背后：OpenManus
         00后主创现场演示，Agent开发的“快”与“痛” | 万有引力</span>
       </p>
      </a>
      <a href="#" target="_blank" class="banner-box">
       <img src="../assets/hiddenImg.jpg" alt="">
       <div class="banner-img"></div>
       <p>
        <span class="word-2">180分钟复刻40k Star神话背后：OpenManus
         00后主创现场演示，Agent开发的“快”与“痛” | 万有引力</span>
       </p>
      </a>
     </div>
     <div class="home-info-headlines">
      <router-link :to="`/alumni-event/1`" target="_blank" rel="noopener noreferrer">
       <div class="left">
        <i class="iconfont icon-remai"></i>
        <span class="text word-1">曝苹果紧急往美国运送600吨iPhone；Unity 6不再向中国用户提供；百川智能成立两周年，王小川发布全员信 | 极客头条</span>
       </div>
       <div class="right">
        <span class="end_date">
         <i class="iconfont icon-daikaishi"></i>
         <span>2025-03-04</span>
        </span>
       </div>
      </router-link>

      <router-link :to="`/alumni-event/2`" target="_blank" rel="noopener noreferrer">
       <div class="left">
        <i class="iconfont icon-remai"></i>
        <span class="text word-1">曝苹果紧急往美国运送600吨iPhone；Unity 6不再向中国用户提供；百川智能成立两周年，王小川发布全员信 | 极客头条</span>
       </div>
       <div class="right">
        <span class="end_date">
         <i class="iconfont icon-daikaishi"></i>
         <span>2025-03-04</span>
        </span>
       </div>
      </router-link>

      <router-link :to="`/alumni-event/3`" target="_blank" rel="noopener noreferrer">
       <div class="left">
        <i class="iconfont icon-remai"></i>
        <span class="text word-1">曝苹果紧急往美国运送600吨iPhone；Unity 6不再向中国用户提供；百川智能成立两周年，王小川发布全员信 | 极客头条</span>
       </div>
       <div class="right">
        <span class="end_date">
         <i class="iconfont icon-daikaishi"></i>
         <span>2025-03-04</span>
        </span>
       </div>
      </router-link>

      <router-link :to="`/alumni-event/4`" target="_blank" rel="noopener noreferrer">
       <div class="left">
        <i class="iconfont icon-remai"></i>
        <span class="text word-1">曝苹果紧急往美国运送600吨iPhone；Unity 6不再向中国用户提供；百川智能成立两周年，王小川发布全员信 | 极客头条</span>
       </div>
       <div class="right">
        <span class="end_date">
         <i class="iconfont icon-daikaishi"></i>
         <span>2025-03-04</span>
        </span>
       </div>
      </router-link>


     </div>


    </div>
    <div class="career-resources">
     <div class="resources-title">
      <!-- 新增标题栏 -->
      <div class="title-left">
       <h3>职业资源</h3>
      </div>

     </div>
     <!-- Tab导航 -->
     <div class="resources-tabs">
      <div class="left">
       <div v-for="(tab, index) in
        ['职业规划', '行业资讯', '招聘信息']" :key="index" :class="['tab-item', { active: activeTab === index }]"
        @click="activeTab = index">
        {{ tab }}
       </div>
      </div>
      <div class="more-resources">
       <span>更多资源</span>
       <el-icon>
        <ArrowRight />
       </el-icon>
      </div>
     </div>
     <!-- 内容列表 -->
     <div class="article-list">
      <div class="article-item">
       <!-- 用户信息 -->
       <div class="user-info">
        <img class="user-avatar" src="../assets/default-avatar.png" alt="">
        <span class="user-name">张三学长</span>
       </div>

       <!-- 内容主体 -->
       <div class="article-content">
        <div class="content-left">
         <a class="article-title" href="/article/1">2024应届生求职指南：从简历到Offer的全流程解析</a>
         <p class="article-desc">本文详细讲解应届生求职过程中的关键环节，涵盖简历优化、面试技巧、薪资谈判等实用内容...</p>
         <div class="article-stats">
          <div class="stat-item">
           <el-icon>
            <View />
           </el-icon>
           阅读 2.6k
          </div>
          <div class="stat-item">
           <i class="iconfont icon-zan"></i>
           赞 356
          </div>
          <div class="stat-item">
           <i class="iconfont icon-shoucang"></i>
           收藏 891
          </div>
         </div>
        </div>
        <div class="content-right">
         <img class="article-thumb" src="../assets/article-thumb.jpg" alt="文章封面">
        </div>
       </div>
      </div>
     </div>
    </div>


   </div>

  </div>
 </div>
 <footer class="footer">
  <div class="footer-row">
   <!-- 关于我们 -->
   <span>关于我们</span>
   <!-- 电话图标 -->
   <i class="iconfont icon-dianhua"></i>
   <span>400-100-111</span>
   <!-- 信箱图标 -->
   <i class="iconfont icon-youxiang"></i>

   <span>cgcg@gradlink.net</span>
   <!-- 客服头像图标 -->
   <i class="iconfont icon-kefu"></i>

   <span>在线客服</span>
   <span>工作时间 08:30-22:00</span>
  </div>
  <div class="footer-row">
   <img class="police" src="../assets/police.png" alt="">
   <span>公安备案号110105020311</span>
  </div>
  <div class="footer-row">
   <span>CopyRight</span>
   <i class="iconfont icon-banquan"></i>
   <span>2021 - 2025 毕业生之家</span>
  </div>
 </footer>


</template>

<style lang="scss" scoped>
@keyframes jump {
 0% {
  transform: translateY(0);
 }

 50% {
  transform: translateY(-3px);
 }

 100% {
  transform: translateY(0);
 }
}

@media (max-width: 1279.9px) {
 .right-entry__outside .right-entry-text {
  display: none;
 }
}


.large_header {
 background-color: #fff;
 min-height: 64px;
 // position: relative;
 margin: 0 auto;
 max-width: 2560px;
 width: 100%;
}

.slide_down {
 // position: absolute;
 // top: 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 24px;
 max-width: 2560px;
 width: 100%;
 height: 64px;
 box-shadow: inset 0 -1px 0 #e3e5e7 !important;



 .left_entry {
  display: flex;
  align-items: center;

  .logo {
   width: 100px;
   margin-right: 10px;

   a {
    height: 64px;
    display: block;
    font-size: 0;
    margin-right: 10px;
    background-image: url(../assets/new11.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
   }
  }

  .employ_analysis {
   margin-right: 10px;
   color: #18191c;

   a {
    display: inline-block;

    &:hover {
     animation: jump .3s;
    }


   }
  }
 }

 .center_search_container {
  margin: 0 10px;
  height: 38px;

  .center-search__bar {
   position: relative;
   margin: 0 auto;
   margin-left: 100px;
   min-width: 181px;
   max-width: 500px;

   form {
    border-radius: 8px;
    background-color: #f1f2f3;
    display: flex;
    align-items: center;
    padding: 0 48px 0 4px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    line-height: 38px;
    border: 1px solid #e3e5e7;
    height: 40px;
    opacity: .9;
    transition: background-color .3s;

    &:hover {
     border: 1px solid #e3e5e7;
     background: #fff;
    }

    &:focus-within {
     border: 1px solid #e3e5e7;
     border-bottom: none;
     background: #fff;
    }

    .nav-search-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
     position: relative;
     padding: 0 8px;
     width: 100%;
     height: 32px;
     border: 2px solid transparent;
     border-radius: 6px;

     &:focus {
      background-color: #e3e5e7;
     }

     &:focus-within {
      background-color: #e3e5e7;
     }

     .nav-search-input {
      flex: 1;
      overflow: hidden;
      padding-right: 8px;
      border: none;
      background-color: transparent;
      box-shadow: none;
      color: #61666d;
      font-size: 14px;
      line-height: 20px;

      &:active {
       outline: none;
       background-color: #e3e5e7;
       color: #18191c;
      }
     }

     .nav-search-clean {
      width: 16px;
      height: 16px;
      right: 10px;
      cursor: pointer;
      visibility: hidden;

      svg {
       position: absolute;
       color: #c9ccd0;
      }
     }
    }

    .nav-search-btn {
     position: absolute;
     top: 3px;
     right: 7px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0;
     padding: 0;
     width: 32px;
     height: 32px;
     border: none;
     border-radius: 6px;
     color: #18191c;
     line-height: 32px;
     cursor: pointer;
     transition: background-color .3s
    }
   }
  }
 }

 .right_entry {
  margin-left: 10px;
  display: flex;
  align-items: center;

  .right-entry__outside {
   display: flex;
   align-items: center;
   flex-direction: column;
   flex-shrink: 0;
   margin-right: 0;
   min-width: 50px;
   text-align: center;
   font-size: 13px;
   cursor: pointer;

   .right-entry-icon:hover {
    animation: jump .3s;
   }

   .right-entry-text {
    color: #61666d;
   }
  }

  .v-popover {
   position: absolute;

   transform: translate3d(-50%, 0, 0);
   top: 100%;
   left: 50%;
   transition: .3s;
   z-index: 1;

   .v-popover-content {
    position: relative;
    background-color: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
    border-radius: 8px;
    border: 1px solid #e3e5e7;
    color: #18191c;


   }
  }

  .avatar-popover-is-bottom {
   padding-top: 12px;
   margin-left: -12px;
  }

  .message-popover-is-bottom {
   padding-top: 15px;
   margin-left: 0px;
  }

  .moment-popover-is-bottom {
   padding-top: 15px;
   margin-left: 0px;
  }


  .header-avatar-wrap {
   position: relative;
   box-sizing: content-box;
   padding-right: 10px;
   width: 50px;
   height: 50px;
   cursor: pointer;

   .header-avatar-wrap--container {
    position: relative;
    z-index: 2;

    .header-entry-mini {
     position: absolute;
     top: 5px;
     left: 10px;
     z-index: 2;
     display: block;
     width: 38px;
     height: 38px;
     border-radius: 50%; // 圆形
     animation: fadeIn .6s both;

     img {
      border: 2px solid #fff;
      border-radius: 50%;
      object-fit: inherit;
     }
    }

    @keyframes fadeIn {
     0% {
      opacity: 0;
     }

     100% {
      opacity: 1;
     }
    }
   }

   .avatar-panel-popover {
    padding: 0 24px 18px;
    width: 300px;
    border-radius: 8px;
    background-color: #fff;

    .avatar-top-space {
     height: 25px; // 留出顶部空间
     margin-bottom: 10px;
    }

    .user-nickname {
     text-align: center;
     font-size: 18px;
     font-weight: 550;
     margin-bottom: 10px;
     color: #18191c;
    }

    .links-item {
     list-style: none;
     padding: 0;
     margin: 0;

     .single-link-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 2px;
      padding: 0 14px;
      height: 38px;
      border-radius: 8px;
      color: #61666d;
      font-size: 14px;
      cursor: pointer;
      transition: background-color .3s;
      white-space: nowrap;

      .link-title {
       display: flex;
       align-items: center;


       .link-icon {
        margin-right: 16px;
       }

       .icon-huodong_huodongguanli {
        margin-right: 16px;
        font-size: 19px;
       }

       .icon-wodebaoming1 {
        color: #61666d;
        margin-right: 5px;
        font-size: 29px;
        transform: translateX(-3px);
       }
      }

      .link-icon--right {
       transform: rotate(-90deg);
      }

     }

     .split-line {
      margin: 10px 0;
      width: 100%;
      height: 1px;
      background: #e3e5e7;
     }

     .logout-item {
      display: flex;
      align-items: center;
      padding: 10px 14px;
      border-radius: 8px;
      color: #61666d;
      font-size: 14px;
      cursor: pointer;
      transition: background-color .3s;

      .link-icon {
       margin-right: 16px;
      }
     }

    }

    // margin-bottom: 10px;

    // a,
    // router-link {
    //   text-align: center;
    //   display: block;
    //   padding: 0 10px;
    //   border-radius: 4px;
    //   color: #61666d;
    //   font-size: 14px;
    //   text-decoration: none;
    //   transition: background-color 0.3s;

    //   &:hover {
    //     background-color: #f1f2f3;
    //   }
    // }
   }
  }

  .v-popover-wrap {
   position: relative;

   .red-num--message {
    position: absolute;
    top: -6px;
    left: 25px;
    z-index: 1;
    padding: 0 3px;
    min-width: 15px;
    border-radius: 10px;
    background-color: #fa5a57;
    color: #fff;
    font-size: 12px;
    line-height: 15px;
   }
  }

  .right-entry--message {
   position: relative;

   .red-num--message {
    position: absolute;
    top: -6px;
    left: 25px;
    z-index: 1;
    padding: 0 3px;
    min-width: 15px;
    border-radius: 10px;
    background-color: #fa5a57;
    color: #fff;
    font-size: 12px;
    line-height: 15px;
   }

   .message-entry-popover {
    overflow: hidden;
    width: 142px;
    border-radius: 8px;

    .message-inner-list {
     display: flex;
     flex-direction: column;
     padding: 12px 0;

     .message-inner-list__item {
      position: relative;
      display: flex;
      align-items: center;
      padding: 10px 0 10px 27px;
      color: #61666d;
      text-align: left;
      font-size: 14px;
      transition: background-color .3s;

      .message-inner-list__item--num {
       position: absolute;
       right: 17px;
       padding: 0 5px;
       border-radius: 8px;
       background: #fa5a57;
       color: #fff;
       font-size: 12px;
       line-height: 16px;
      }
     }
    }
   }

   .dynamic-panel-popover {
    width: 370px;
   }


  }

  .right-entry-item {
   display: block;
   flex-shrink: 0;
   margin-right: 4px;
   min-width: 50px;
   text-align: center;
   // background-color: pink;

   .right-entry-icon {
    color: #18191c;
   }

   .icon-fabuzhongxin_gongzuotai {
    display: inline-block;
    vertical-align: top;
    margin-bottom: -7px;
    margin-top: -6px;
    font-size: 23px;
   }

   // .publish-text {
   //   color: #61666d;
   // }    


  }

  .right-entry-item--upload {
   margin: 0;
   min-width: 0;

  }

  .header-upload-entry {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-left: 16px;
   width: 90px;
   height: 34px;
   border-radius: 8px;
   background-color: rgba(0, 174, 236);
   color: #fff;
   text-align: center;
   font-size: 14px;
   line-height: 20px;
   cursor: pointer;
   transition: background-color .3s;

   &:hover {
    background-color: rgba(0, 199, 254);
   }

   .header-upload-entry__icon {
    margin-right: 5px;
    color: #fff;
   }

  }
 }

}

.main-container {
 background-color: #f7f8fa;
 // padding: 70px 0 24px;
 padding: 24px 0;
 min-height: calc(100vh - 64px); // 减去头部高度
}

.content-wrapper {
 max-width: 1200px;
 margin: 0 auto;
}


.content-main {
 background: #fff;
 border-radius: 8px;
 padding: 24px;




}

.alumni-event {


 .home-cont-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;

  span {
   color: #000;
   font-size: 18px;
   font-weight: 600;
  }

  p {
   color: #999;
   cursor: pointer;

   .right-icon {
    padding-top: 7px;
    vertical-align: top;
   }
  }
 }

 .home-info-banner {
  display: flex;
  justify-content: space-between;

  .banner-box {
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
   border-radius: 8px;
   margin: 0 16px;
   overflow: hidden;
   position: relative;
   cursor: pointer;

   img {
    opacity: 0;
   }

   .banner-img {
    position: absolute;
    -webkit-transition: all .5s;
    transition: all .5s;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(../assets/realBg.jpeg);
   }

   &:hover {
    .banner-img {
     -webkit-transform: scale(1.5);
     transform: scale(1.5);
    }
   }

   p {
    position: absolute;
    height: 64px;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#10151a));
    background: linear-gradient(180deg, transparent, #10151a);
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    bottom: 0;
    padding: 0 12px 8px;

    span {
     color: #fff;
     font-weight: 600;
    }
   }


  }
 }


 .home-info-headlines {
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
  margin-top: 16px;

  a {
   width: calc(100% - 10px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   height: 40px;
   color: #000;
   justify-content: space-between;
   border-bottom: 1px solid #f2f2f2;
   position: relative;
   padding-left: 16px;

   .left {
    width: 70%;

    .icon-remai {
     position: absolute;
     left: 0;
     top: 10px;
     font-size: 8px;
     color: #ec4c39;
    }

    .text {
     margin-left: 3px;
    }
   }

   .right {
    display: flex;

    .end_date {
     margin-right: 10px;

     .icon-daikaishi {
      margin-right: 5px;
      color: #eb7778;
     }
    }
   }
  }
 }
}

.resources-title {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 20px;
 margin-top: 30px;

 h3 {
  font-size: 18px;
  font-weight: 600;
  color: #000;
 }

 .title-right {
  display: flex;
  align-items: center;
  color: #9499a0;
  cursor: pointer;
  transition: color 0.3s;

  &:hover {
   color: #00aeec;
  }

  .right-arrow {
   margin-left: 8px;
   font-size: 14px;
  }
 }
}

.resources-tabs {
 position: relative;
 display: flex;
 margin-bottom: 5px;
 border-bottom: 1px solid #f0f0f0;
 justify-content: space-between; // 改为两端对齐
 align-items: center;
 position: relative;

 .left {
  display: flex;

  .tab-item {
   padding: 12px 24px;
   font-size: 16px;
   color: #666666;
   cursor: pointer;
   transition: color 0.3s;

   &.active {
    color: #000;
    font-weight: 600;
    position: relative;

    &::after {
     content: '';
     position: absolute;
     bottom: -1px;
     left: 0;
     width: 100%;
     height: 2px;
     background: #000;
    }
   }

   // 修改此处，仅当 tab-item 没有 active 类时，鼠标悬停才改变颜色
   &:not(.active):hover {
    color: #0088ff;
    animation: jump 0.3s;
   }
  }
 }

 .more-resources {
  display: flex;
  align-items: center;
  color: #9499a0;
  cursor: pointer;
  transition: color 0.3s;

  &:hover {
   color: #00aeec;
  }

  .el-icon {
   margin-left: 8px;
   font-size: 14px;
  }
 }
}

.article-item {
 padding: 16px 0;
 border-bottom: 1px solid #f5f5f5;

 .user-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;

  .user-avatar {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   margin-right: 8px;
  }

  .user-name {
   color: #666;
   font-size: 14px;
  }
 }

 .article-content {
  display: flex;
  justify-content: space-between;

  .content-left {
   flex: 1;
   padding-right: 24px;
  }

  .content-right {
   max-width: 130px;
   flex-shrink: 0;
  }
 }

 .article-title {
  font-size: 18px;
  color: #18191c;
  margin-bottom: 8px;
  display: block;

  &:hover {
   color: #00aeec;
  }
 }

 .article-desc {
  color: #9499a0;
  font-size: 14px;
  margin-bottom: 12px;
  line-height: 1.5;
 }

 .article-stats {
  display: flex;
  gap: 24px;
  color: #9499a0;
  font-size: 13px;

  .stat-item {
   display: flex;
   align-items: center;
   gap: 4px;

   .icon-zan {
    vertical-align: bottom;
    margin-bottom: -4px;
    font-size: 14px;
   }

   .icon-shoucang {
    font-size: 13px;

   }
  }
 }

 .article-thumb {
  width: 100%;
  // height: 80px;
  border-radius: 4px;
  object-fit: cover;
 }
}


.footer {
 text-align: center;
 /* 让每行内容居中 */
 padding: 20px 0;
 background-color: #f5f5f5;
}

.footer-row {
 margin-bottom: 10px;

 i {
  margin: 0 6px;
 }

 .icon-youxiang {
  font-size: 17px;
 }

 img {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
  margin-bottom: 3px;
 }

 .icon-banquan {
  font-size: 17px;
 }
}

.footer-row svg {
 margin: 0 5px;
 vertical-align: middle;
}

/* 添加固定样式 */
.fixed_header {
 // display: none;
 background-color: #fff;
 min-height: 64px;
 margin: 0 auto;
 max-width: 2560px;
 width: 100%;
 // 添加硬件加速
 // transform: translateZ(0);
 // backface-visibility: hidden;
 position: fixed;
 top: -64px;
 z-index: 1000;
 /* 确保 header 在其他元素之上 */
 transition: transform 0.3s ease; // 使用transform实现更流畅的动画
 animation: slideDown 0.3s forwards; // 添加下滑动画
}

@keyframes slideDown {
 to {
  top: 0;
 }
}
</style>